import { View } from '@tarojs/components';
import React, { useCallback, useState } from 'react';
import { useRouter } from '@tarojs/taro';
import MobileLogin from '../mobileLogin/index';
import UserPwdLogin from '../userPwdLogin/index';

const Status = {
  Mobile: 'Mobile',
  UserPwd: 'UserPwd',
};

const H5Wrap = () => {
  const { params = {} } = useRouter();

  const [status, setStatus] = useState(params.mobile ? Status.Mobile : Status.UserPwd);

  const toggle = useCallback(() => {
    if (status === Status.UserPwd) {
      setStatus(Status.Mobile);
    } else {
      setStatus(Status.UserPwd);
    }
  }, [status]);

  return (
    <View>
      {status === Status.Mobile ? (
        <MobileLogin toggle={toggle} />
      ) : (
        <UserPwdLogin toggle={toggle} />
      )}
    </View>
  );
};
export default H5Wrap;
